<template>
  <el-card>
    <el-form :inline="true" class="form">
      <el-form-item label="日志内容">
        <el-input @keyup.enter="search" placeholder="请输入日志内容"
                  v-model="pageRequest.model.content"></el-input>
      </el-form-item>
      <el-form-item label="日志类型">
        <el-select
            style="width: 120px"
            v-model="pageRequest.model.logType"
            placeholder="请选择状态"
            clearable>
          <el-option label="登录日志" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-select
            style="width: 120px"
            v-model="pageRequest.model.status"
            placeholder="请选择状态"
            clearable>
          <el-option label="失败" :value="0"></el-option>
          <el-option label="成功" :value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item style="width: 250px" label="操作人类型">
        <el-select
            v-model="pageRequest.model.operatorType"
            placeholder="请选择操作人类型"
            clearable
        >
          <el-option
              v-for="(label, key) in operatorTypeMap"
              :key="key"
              :label="label"
              :value="key"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="default" @click="search">
          搜索
        </el-button>
        <el-button type="primary" size="default" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <el-card style="margin: 10px 0;">
    <el-table @selection-change="selectChange" border style="margin: 10px 0;" :data="logData">
      <el-table-column type="selection" align="center"></el-table-column>
<!--      <el-table-column width="100px" label="ID" align="center" prop="id"></el-table-column>-->
      <el-table-column label="操作人" align="center" prop="operatorName" show-overflow-tooltip></el-table-column>
      <el-table-column label="操作时间" align="center" prop="operateTime" show-overflow-tooltip>
        <template #default="{ row }">
          {{ formatTimestamp(row?.operateTime) }}
        </template>
      </el-table-column>
      <el-table-column label="操作人类型" align="center" show-overflow-tooltip>
        <template #default="{ row }">
          <!-- 根据 roleKey 显示对应的中文角色名称 -->
          <span>{{ operatorTypeMap[row?.operatorType] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" width="100">
        <template #default="{row}">
          <el-tag v-if="row.status === 1" type="success">成功</el-tag>
          <el-tag v-if="row.status === 0" type="danger">失败</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="内容" align="center" prop="content" show-overflow-tooltip></el-table-column>
<!--      <el-table-column label="操作" width="280px" align="center">-->
<!--        <template #default="{ row, $index }">-->
<!--          <el-button type="primary" size="small" icon="View" @click="getLogInfo(row)">-->
<!--            详情-->
<!--          </el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->
    </el-table>
    <!-- 分页器 -->
    <el-pagination v-model:current-page="pageRequest.page.index" v-model:page-size="pageRequest.page.size"
                   :page-sizes="[10, 20, 30, 50]"
                   :background="true" layout="prev, pager, next, jumper,->,sizes,total" :total="total"
                   @current-change="getHasRole"
                   @size-change="handlerRole"/>
  </el-card>
  <!-- 添加职位与更新已有职位的结构:抽屉组件 -->
  <el-drawer v-model="dialogVisite" title="详情">
    <!-- 身体部分 -->
    <template #default>

    </template>
    <template #footer>
      <el-button @click="dialogVisite = false">关 闭</el-button>
    </template>
  </el-drawer>
</template>

<script setup lang="js">
import {onMounted, ref} from 'vue';
//请求方法
//引入骨架的仓库
import useLayOutSettingStore from '@/store/modules/setting';
import setting from "@/setting.js";
import {getLogPagesUrl} from "@/api/system/log/log.js";
import {formatTimestamp} from "@/utils/time.js";

let settingStore = useLayOutSettingStore();
//分页查询请求参数
let pageRequest = ref({
  page: {
    index: 1,
    size: 10,
  },
  model: {}
});

// 操作人类型
const operatorTypeMap = {
  system: '系统',
  admin: '系统管理员',
  common: '普通用户',
  temporary: '临时用户'
}

//存储全部已有的职位
let logData = ref([]);
//准备一个数组存储批量删除的用户的ID
let selectIdArr = ref([]);
//职位总个数
let total = ref(0);
//控制对话框的显示与隐藏
let dialogVisite = ref(false);
//获取form组件实例
let form = ref();


//获取全部用户信息的方法|分页器当前页码发生变化的回调
const getHasRole = async (pager = 1) => {
  //修改当前页码
  pageRequest.value.page.index = pager;
  let result = await getLogPagesUrl(pageRequest.value);
  if (result.code == setting.SYSTEM_SUCCESS) {
    total.value = result.data.total;
    logData.value = result.data.items;
  }
}
//table复选框勾选的时候会触发的事件
const selectChange = (value) => {
  selectIdArr.value = value;
}

//搜索按钮的回调
const search = () => {
  //再次发请求根据关键字
  getHasRole();
  //keyword.value = '';
}
//重置按钮的回调
const reset = () => {
  settingStore.refsh = !settingStore.refsh;
}

const filterSelectArr = (allData, initArr) => {
  allData.forEach((item) => {
    if (item.isSelect && item.children.length == 0) {
      initArr.push(item.id);
    }
    if (item.children && item.children.length > 0) {
      filterSelectArr(item.children, initArr);
    }
  })
  return initArr;
}

const handlerRole = () => {
  getHasRole()
}

onMounted(() => {
  //获取职位请求
  getHasRole();
});

</script>

<style scoped>
.form {
  margin-top: 15px;
  display: flex;
  align-items: center;
}
</style>
